<template>
    <div class="bindTel">
        <header-cont></header-cont>
        <div class="section">
            <div class="user_info">
                <div class="title">绑定手机号</div>
                <div class="logo">
                    <img src="@/assets/logo.png" alt="">
                </div>
                <p>您好，<span>黄子韬</span></p>
                <b>为了您的账户安全，请您绑定手机号</b>
            </div>
            <a-form-model layout="inline" :model="formInline" @submit="handleSubmit" @submit.native.prevent>
                <a-form-model-item>
                    <a-input v-model="formInline.tel" placeholder="手机号"></a-input>
                </a-form-model-item>
                <a-form-model-item>
                    <a-input v-model="formInline.imgCode" placeholder="图片验证码"></a-input>
                    <span>图片验证码</span>
                </a-form-model-item>
                <a-form-model-item>
                    <a-input v-model="formInline.telCode" placeholder="手机验证码"></a-input>
                    <span>获取验证码</span>
                </a-form-model-item>
                <a-button type="primary">确定</a-button>
            </a-form-model>
        </div>
    </div>
</template>

<script>
import headerCont from '@/views/declarationSystem/common/header';

    export default {
        components: {
			headerCont,
        },
        data(){
            return {
                formInline: {
                    tel: "",
                    imgCode: "",
                    telCode: ''
                }
            }
        }
    }
</script>
<style lang="less">
    .bindTel {
        .ant-form-inline {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            margin-bottom: 110px;
            .ant-form-item {
                width: 434px;
                height: 50px;
                margin-bottom: 21px;
            
                .ant-form-item-control-wrapper {
                    width: 434px;
                    height: 50px;
                    .ant-form-item-control {
                        width: 434px;
                        height: 50px;
                        input {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }    
                &:nth-child(2) {
                    
                    width: 434px;
                    height: 50px;
                    margin-bottom: 21px;
                
                    .ant-form-item-control-wrapper {
                        
                        width: 434px;
                        height: 50px;
                        .ant-form-item-control {
                            
                            width: 434px;
                            height: 50px;
                            .ant-form-item-children {
                                display: flex;
                                justify-content: space-between;
                                
                                input {
                                    width: 293px;
                                    height: 50px;
                                }
                                span {
                                    width: 127px;
                                    height: 50px;
                                    border: 1px solid #d9d9d9;
                                    text-align: center;
                                    line-height: 50px;
                                }
                            }
                            
                        }
                    }    
                }
                &:nth-child(3) {
                    
                    width: 434px;
                    height: 50px;
                    margin-bottom: 21px;
                
                    .ant-form-item-control-wrapper {
                        
                        width: 434px;
                        height: 50px;
                        .ant-form-item-control {
                            
                            width: 434px;
                            height: 50px;
                            .ant-form-item-children {
                                position: relative;
                                width: 434px;
                                height: 50px;
                                display: flex;
                                justify-content: space-between;
                                
                                input {
                                    width: 434px;
                                    height: 50px;
                                    padding-right: 120px;
                                }
                                span {
                                    cursor: pointer;
                                    position: absolute;
                                    right: 22px;
                                    top: 0;
                                    // width: 170px;
                                    height: 50px;
                                    text-align: center;
                                    line-height: 50px;
                                    font-size: 18px;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #006DC0;
                                }
                            }
                            
                        }
                    }    
                }
            }
            button {
                width: 434px;
                height: 54px;
                background: linear-gradient(90deg, #3D9CED 0%, #1A60C7 99%, #1A60C7 100%);
                border-radius: 5px;
                font-size: 22px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }
        }
    }
</style>
<style lang="less" scoped>
.bindTel {
    width: 100%;
    .section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .user_info {
            .title {
                font-size: 36px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 50px;
                margin-top: 40px;
                text-align: center;
            }
            .logo {
                margin-top: 38px;
                text-align: center;
                img {
                    width: 110px;
                    height: 110px;
                    display: block;
                    margin: 0 auto;
                }
            }
            p {
                margin-top: 26px;
                font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                line-height: 25px;
                margin-bottom: 0;
                span {
                    color: #006DC0;
                    font-size: 18px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                }
            }
            b {
                display: block;
                margin-top: 8px;
                font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                line-height: 25px;
            }
        }
        
    }   
}
</style>